 <template>
 	<view class="my">
 		<view class="my-header">
 			<image class="image-bg" src="../../static/beijing6.jpg" mode=""></image><!--背景图-->
 			<view class="header-main">
 				<view class="logo">
 					<image src="../../static/logoimg.png" mode=""></image>
 				</view>

 				<!--昵称-->



 				<view class="header-logo">
 					<view class="viplogo">
 						<image v-if="this.user.roleId==2" class="vip-logo" src="../../static/VIP11.png"></image>
 						<image v-if="this.user.roleId!=2" class="vip-logo" src="../../static/VIP22.png"></image>
 					</view>
 					<view class="header-right">


 						<image v-if="!this.user" class="logo-img" @click="goto('/pages/set/set')" :src="getImage('')"
 							mode=""></image>
 						<image v-if="this.user" class="logo-img" @click="goto('/pages/set/set')"
 							:src="getImage(this.user.avatar)" mode=""></image>
 						<view class="logo-name">

 							<!--{{  loginStatus ? userInfo.nickName:"用户昵称"}}--><!--如果是登录状态了就显示用户昵称-->
 							<text v-if="!this.user">请先登录</text>
 							<text v-if="this.user && this.userTX">{{this.us.name}}</text>
 							<!-- <text v-if="this.user && !this.userTX">{{this.userName}}</text> -->
 						</view> <!--昵称-->
 					</view>
 				</view>
 			</view>
 		</view>


 		<!--权益模块	-->
 		<view class="myself">
 			<view class="myself-title">
 				<view>我的权益</view>
 			</view>
 			<view class="myself-list">


 				<view class="myself-item" @click="goto('/pages/wallet/wallet')">
 					<image class="myself-img" src="../../static/sy.png" mode=""></image>

 					<view>积分收益</view>
 				</view>
 				<view class="myself-item" @click="goto('/pages/integral/integral')">
 					<image class="myself-img" src="../../static/qianbao.png" mode=""></image>
 					<view>我的钱包</view>
 				</view>



 			</view>
 		</view>

 		<!--VIP-->
 		<view class="vip" @click="goto('/pages/vip/vip')">

 			<uni-card class="vip-main" title="vip特权" extra="开通vip>>>" :thumbnail="avatar">
 			</uni-card>

 		</view>

 		<!--我的订单模块-->
 		<view class="order">
 			<view class="order-title">
 				<view>我的订单</view>
 			</view>

 			<view class="order-list">
 				<view class="order-item" @click="goto('/pages/orderform/orderform?selectedIndex=0')">
 					<image class="order-img" src="../../static/daishouhuo1.png" mode=""></image>
 					<view>预约订单</view>
 				</view>

 				<view class="order-item" @click="goto('/pages/orderform/shopOrder/shopOrder?selectedIndex=0')">
 					<image class="order-img" src="../../static/wc2.png" mode=""></image>
 					<view>商品订单</view>
 				</view>

 			</view>
 		</view>


 		<!--服务-->
 		<view class="serve">
 			<view class="serve-title">
 				<view>我的服务</view>
 			</view>

 			<view class="serve-list">
 				<view class="serve-item" @click="goto('/pages/shopping/shopping')">
 					<image class="serve-img" src="../../static/sc.png" mode=""></image>
 					<view>积分商城</view>
 				</view>
 				<view class="serve-item" @click="goto('/pages/orderform/shopOrder/shopOrder')">
 					<image class="serve-img" src="../../static/jl.png" mode=""></image>
 					<view>换购记录</view>
 				</view>
 				<view class="serve-item" @click="goto('/pages/finding/Invation/Invation')">
 					<image class="serve-img" src="../../static/fenx.png" mode=""></image>
 					<view>分享得积分</view>
 				</view>
 				<view class="serve-item" @click="goto('/pages/joinus/joinus')">
 					<image class="serve-img" src="../../static/jr.png" mode=""></image>
 					<view>加盟我们</view>
 				</view>

 				<view class="serve-item" @click="goto('/pages/serve/serve')">
 					<image class="serve-img" src="../../static/fw.png" mode=""></image>
 					<view>服务范围</view>
 				</view>
 				<view class="serve-item" @click="goto('/pages/about/about')">
 					<image class="serve-img" src="../../static/guany.png" mode=""></image>
 					<view>关于我们</view>
 				</view>
 				<view class="serve-item" @click="goto('/pages/link/link')">
 					<image class="serve-img" src="../../static/lx.png" mode=""></image>
 					<view>联系我们</view>
 				</view>
 				<view class="serve-item" @click="goto('/pages/advantage/advantage')">
 					<image class="serve-img" src="../../static/youshi.png" mode=""></image>
 					<view>我们的优势</view>
 				</view>


 			</view>
 		</view>

 		<!--登录
 		<view class="btns">
 	      <view class="btn" @click="goto('/pages/login/login')">
 			  <button type="primary">登录</button>
 		  </view>	  
 	    </view>-->

 		<view class="btns">
 			<view class="btn" v-if="this.user" id="myButton" @click='outLogin'>退出登录</view>
 			<view class="btn" v-if="!this.user" id="myButton" @click='login'>登录</view>
 		</view>


 		<Tabbar cureentPage='my'></Tabbar>


 	</view>

 </template>


 <script>
 	import {
 		mapMutations
 	} from 'vuex';
 	import OrderApi from '@/common/FindingService/OrderApi.js';
 	import $http from '@/common/api/request.js' //引入request组件
 	import Tabbar from '../../components/common/Tabbar.vue'
 	import {
 		mapState
 	} from 'vuex';

 	export default {
 		data() { //卡片
 			return {

 				showFavorites: false,
 				showUpdates: false,
 				receiveNotifications: false,

 				sex: '',
 				introduction: '',
 				user: [],
 				userTX: true,
 				userName: null,
 				us: '',
 				avatar: '/static/card vip1.png',
 				extraIcon: {
 					color: '#4cd964',
 					size: '22',
 					type: 'gear-filled',




 				}
 			}
 		},
 		components: {
 			Tabbar
 		},
 		/*computed:{
 		  ...mapState({
 			  loginStatus:state=>state.user.loginStatus,
 			  userInfo:state=>state.user.userInfo
 		  })
 	  },*/
 		mounted() {

 			//全局变量用户ID
 			this.userId = uni.getStorageSync('userId');
 			this.user = uni.getStorageSync('user');
 			// this.userName = uni.getStorageSync('user.name');
 			this.userId = uni.getStorageSync('userId');
 			//加载用户信息
 			OrderApi.queryUser(this.userId).then(res => {
 				this.us = res.data.data



 			})


 		},
 		onLoad(query) {





 		},

 		methods: {
 			...mapMutations(['loginOut']),
 			goPathList() {
 				uni.navigateTo({
 					url: '../my-path-list/my-path-list'
 				})
 			},
 			save() {
 				// 保存用户信息逻辑
 			},
 			login() {
 				uni.navigateTo({
 					url: '../login/login'
 				})
 			},
 			getImage(image) {
 				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
 			},
 			outLogin() {
 				if (!this.user) {
 					uni.navigateTo({
 						url: '../login/login'
 					})
 				} else {
 					uni.showToast({
 						title: "退出成功",
 						icon: "none",
 						duration: 1000
 					})
 					this.loginOut(); //调用user.js的函数loginout
 					// 删除本地缓存中的user数组
 					uni.removeStorageSync('user');

 					// 将computed属性中的user字段设为空数组
 					this.user = [];
 					setTimeout(() => {
 						uni.navigateTo({
 							url: '../index/index'
 						});
 					}, 1000);
 				}
 			},
 			goto(url) {
 				if (!this.user) {
 					uni.navigateTo({
 						url: '../login/login'
 					})
 				} else {
 					uni.navigateTo({
 						url: url
 					})
 				}

 			},


 			onClick(url) {

 				uni.navigateTo({
 					url: url
 				})
 			},
 			actionsClick(text) { //卡片
 				uni.showToast({
 					title: text,
 					icon: 'none'
 				})
 			},

 			switchTab(url) { //tabbar
 				uni.switchTab({
 					url: url
 				})
 			}


 		}




 	}
 </script>


 <style scoped>
 	//顶部栏
 	.my {}

 	.logo {
 		position: absolute;
 		top: -180rpx;
 		right: -150rpx;
 		opacity: 0.4;
 	}

 	.my-header {
 		position: relative;

 		position: relative;
 		z-index: 0; // 支付宝小程序下背景不生效时，可以加上这个
 		height: 320rpx;
 	}

 	.image-bg {

 		position: absolute;
 		z-index: -1;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		right: 0;
 		width: 100%;
 		height: 100%;
 	}

 	.header-main {

 		position: relative;
 		top: 60rpx;

 	}

 	.header-config {
 		position: absolute;
 		left: 40rpx;
 	}

 	.header-logo {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;

 		position: absolute;
 		left: 10%;
 		width: 60%;
 	}

 	.header-right {
 		display: flex;
 		flex-direction: row;
 	}

 	.logo-img {
 		width: 120rpx;
 		height: 120rpx;
 		border-radius: 50%;
 		border: 2rpx solid #CCCCCC;
 		background-color: #FFFFFF;
 	}

 	.logo-name {
 		margin-top: 40rpx;
 		margin-left: 30rpx;
 		display: flex;
 		justify-content: space-between;
 		width: 300rpx;
 		flex-direction: column;
 		font-weight: bold;
 		color: darkslategray;
 		font-size: 33rpx;


 	}

 	.vip-logo {
 		width: 60rpx;
 		height: 60rpx;
 		border-radius: 50%;
 	}

 	.count {
 		font-size: 30rpx;
 		font-weight: 200;
 	}


 	//权益模块
 	.myself {

 		margin: 30rpx;
 		margin-top: 60rpx;
 		/*box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.2);*/
 	}

 	.myself-title {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 20rpx;
 		background-color: aliceblue;
 		;
 		font-weight: bold;
 		;
 	}

 	.myself-list {
 		padding: 20rpx 100rpx;
 		display: flex;
 		flex-wrap: wrap;

 		background-color: azure;
 		justify-content: space-between;
 	}

 	.myself-item {
 		width: 200rpx;
 		padding: 10rpx;
 		display: flex;
 		flex-direction: column;
 		align-items: center;

 	}

 	.myself-img {
 		width: 56rpx;
 		height: 56rpx;
 	}

 	.viplogo {
 		margin-left: 34rpx;
 	}

 	//vip模块
 	.vip {
 		padding-top: 5rpx;
 	}

 	.vip-main {

 		height: 105rpx;
 		background-image: url("../../static/beijing6.jpg");

 	}

 	//订单模块
 	.order {

 		margin: 30rpx;
 		margin-top: 60rpx;
 		/* box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.2);*/
 	}

 	.order-title {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 20rpx;
 		font-weight: bold;
 		background-color: aliceblue;

 	}

 	.order-list {
 		padding: 20rpx;
 		display: flex;
 		background-color: azure;

 	}

 	.order-item {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 	}

 	.order-img {
 		width: 56rpx;
 		height: 56rpx;
 	}

 	//服务模块
 	.serve {
 		margin: 30rpx;
 		margin-top: 60rpx;
 		/*box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.2);*/
 	}

 	.serve-title {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 20rpx;
 		font-weight: bold;
 		background-color: aliceblue;
 		;
 	}

 	.serve-list {
 		padding: 20rpx;
 		display: flex;
 		flex-wrap: wrap;
 		background-color: azure;

 	}

 	.serve-item {
 		width: 33%;
 		padding: 35rpx;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;


 	}

 	.serve-img {
 		width: 56rpx;
 		height: 56rpx;
 	}

 	//退出登录1
 	.btns {
 		margin-left: -20rpx;
 		margin-right: -20rpx;

 		padding: 50rpx;
 		padding-top: 20rpx;

 	}

 	.btn {
 		background-color: #7ED6DF;
 		font-size: 45rpx;
 		align-items: center;
 		display: flex;
 		justify-content: center;
 		line-height: 85rpx;
 		color: #fff;
 		border-radius: 50rpx;
 	}
 </style>